<template>
  <div class="formBox">
    <!-- 卡片视图区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- table表格区域 -->
      <el-table :data="tableData" label-width="auto" fit size="medium">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="id" label="用户id"></el-table-column>
        <el-table-column prop="displayName" label="用户名"></el-table-column>
        <el-table-column prop="name" label="显示名"></el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getRolesData } from '../network/api.js'
// import dayjs from '../utils/dayjs'
export default {
  components: {},
  props: {},
  data() {
    //这里存数据
    return {
      // 查询参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10,
      },
      // 数据列表
      tableData: [],
      // 总数据条数
      total: 0,
    }
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法
  methods: {
    // 获取数据
    async getFormData() {
      await getRolesData({
        MaxResultCount: this.queryInfo.pagesize,
        SkipCount: (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize,
      })
        .then((res) => {
          console.log(res)
          // console.log(res.result.items, 1233)
          this.total = res.result.totalCounts
          console.log(res.result.items)
          this.tableData = res.result.items
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // 监听对话框的关闭事件，重置表单数据
    // 监听 pagesize 改变的事件
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getFormData()
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getFormData()
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getFormData()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
}
</script>

<style lang="less" scoped>
</style>>


